<template>
  <div class="mt-5 px-5">
    <div
      class="mb-9 uppercase cursor-pointer flex items-center rounded-r-full bg-gradient-to-l py-2.5 hover:from-[#4b484830]"
      :class="{ 'from-red1': isActive === index }"
      @click="handleOptionSelect(index)"
      v-for="(item, index) in mainList"
      :key="index">
      <WImage class="mr-2.5 h-6 w-6" :src="useAsset(item.icon)" />
      <p class="text-sm font-[500]">{{ item.text }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import WImage from '~/components/logic/WImage.vue'

const { $mt } = useCommonPlugin()
const route = useRoute()
const mainList = ref([
  {
    id: 1,
    text: $mt('My Account'),
    icon: 'me-icon-zhanghu.png',
  },
  {
    id: 2,
    text: $mt('My Orders'),
    icon: 'me-icon-order.png',
  },
])
const { $pushRoute, $localePath } = useCommonPlugin()
const isActive = ref()
const initActiveIdx = () => {
  isActive.value = route.path === $localePath('/user/order') ? 1 : 0
}
const handleOptionSelect = (index: number) => {
  isActive.value = index
  if (index === 0) return $pushRoute('/user')
  if (index === 1) return $pushRoute('/user/order')
}

initActiveIdx()
</script>

<style lang="scss"></style>
